<template>
  <el-dialog
    :close-on-click-modal="false"
    title="维修案件"
    :visible="detailsVisible"
    width="60%"
    :before-close="onClose"
  >
  <div style="max-height: 70vh; overflow-y: auto; padding: 0 30px">
    <el-form ref="form" :model="form" size="mini">
      <el-row>
        <el-col :span="36">
          <el-form-item label="维修现场作业照片:">
            <el-upload
              class="load"
              action="#"
              :http-request="(request) => uploadImage(request, 'operation')"
              :on-change="
                (file, fileList) => handleChangeImg(file, fileList, 'operation')
              "
              :on-remove="
                (file, fileList) => handleRemove(file, fileList, 'operation')
              "
              :show-file-list="false"
              :file-list="fileList"
              multiple
              style="margin-left: 5px"
            >
              <el-button type="primary" size="mini">上传</el-button>
            </el-upload>
            <div
              v-for="(item, index) in operationImages"
              :key="index"
              style="
                position: relative;
                display: inline-block;
                margin-top: 10px;
              "
            >
              <el-image
                :src="item"
                :preview-src-list="getImgList(operationImages, index)"
                style="width: 80px; height: 80px; margin: 0 0 5px 5px"
              ></el-image>
              <i
                class="el-icon-circle-close"
                @click="removeImage(index, 'operation')"
                style="
                  position: absolute;
                  top: 0;
                  right: 0;
                  cursor: pointer;
                  background-color: #fff;
                  padding: 2px;
                "
              ></i>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="36">
          <el-form-item label="现场维修过程验收照片:">
            <el-upload
              class="load"
              action="#"
              :http-request="(request) => uploadImage(request, 'acceptance')"
              :on-change="
                (file, fileList) =>
                  handleChangeImg(file, fileList, 'acceptance')
              "
              :on-remove="
                (file, fileList) => handleRemove(file, fileList, 'acceptance')
              "
              :show-file-list="false"
              :file-list="fileList"
              multiple
              style="margin-left: 5px"
            >
              <el-button type="primary" size="mini">上传</el-button>
            </el-upload>
            <div
              v-for="(item, index) in acceptanceImages"
              :key="index"
              style="
                position: relative;
                display: inline-block;
                margin-top: 10px;
              "
            >
              <el-image
                :src="item"
                :preview-src-list="getImgList(acceptanceImages, index)"
                style="width: 80px; height: 80px; margin: 0 0 5px 5px"
              ></el-image>
              <i
                class="el-icon-circle-close"
                @click="removeImage(index, 'acceptance')"
                style="
                  position: absolute;
                  top: 0;
                  right: 0;
                  cursor: pointer;
                  background-color: #fff;
                  padding: 2px;
                "
              ></i>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="36">
          <el-form-item label="复勘照片:">
            <el-upload
              class="load"
              action="#"
              :http-request="(request) => uploadImage(request, 'resurvey')"
              :on-change="
                (file, fileList) => handleChangeImg(file, fileList, 'resurvey')
              "
              :on-remove="
                (file, fileList) => handleRemove(file, fileList, 'resurvey')
              "
              :show-file-list="false"
              :file-list="fileList"
              multiple
              style="margin-left: 5px"
            >
              <el-button type="primary" size="mini">上传</el-button>
            </el-upload>
            <div
              v-for="(item, index) in resurveyImages"
              :key="index"
              style="
                position: relative;
                display: inline-block;
                margin-top: 10px;
              "
            >
              <el-image
                :src="item"
                :preview-src-list="getImgList(resurveyImages, index)"
                style="width: 80px; height: 80px; margin: 0 0 5px 5px"
              ></el-image>
              <i
                class="el-icon-circle-close"
                @click="removeImage(index, 'resurvey')"
                style="
                  position: absolute;
                  top: 0;
                  right: 0;
                  cursor: pointer;
                  background-color: #fff;
                  padding: 2px;
                "
              ></i>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="36">
          <el-form-item label="维修合同签定:">
            <el-upload
              class="load"
              action="#"
              :http-request="(request) => uploadImage(request, 'contract')"
              :on-change="
                (file, fileList) => handleChangeImg(file, fileList, 'contract')
              "
              :on-remove="
                (file, fileList) => handleRemove(file, fileList, 'contract')
              "
              :show-file-list="false"
              :file-list="fileList"
              multiple
              style="margin-left: 5px"
            >
              <el-button type="primary" size="mini">上传</el-button>
            </el-upload>
            <div
              v-for="(item, index) in contractImages"
              :key="index"
              style="
                position: relative;
                display: inline-block;
                margin-top: 10px;
              "
            >
              <el-image
                :src="item"
                :preview-src-list="getImgList(contractImages, index)"
                style="width: 80px; height: 80px; margin: 0 0 5px 5px"
              ></el-image>
              <i
                class="el-icon-circle-close"
                @click="removeImage(index, 'contract')"
                style="
                  position: absolute;
                  top: 0;
                  right: 0;
                  cursor: pointer;
                  background-color: #fff;
                  padding: 2px;
                "
              ></i>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="footer">
      <el-button @click="onClose">取 消</el-button>
      <el-button @click="onEnter" type="primary">提 交</el-button>
    </div>
  </div>
  </el-dialog>
</template>

<script>
import { uploadImage, removeObject } from "@/utils/minio";
import { addMaintenanceImg } from "@/api/system/serviceManage";
export default {
  name: "caseDetailsEdit",
  components: {},
  data() {
    return {
      fileList: [],
      form: {},
      operationImages: [], //维修现场作业照片
      acceptanceImages: [], //现场维修过程验收照片
      resurveyImages: [], //复勘照片
      contractImages: [], //维修合同签定
      imagesToRemove: [], // 记录删除的照片
      newImages: [] // 记录新增的照片
    };
  },
  props: {
    detailsVisible: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default() {
        return {};
      },
    },
    imgData: {
      default() {
        return {};
      },
    },
  },
  computed: {},
  watch: {
    formData(e) {
      this.form = {
        ...e,
      };
    },
    imgData(e) {
      console.log(e);
      this.operationImages = e.operationImages || [];
      this.acceptanceImages = e.acceptanceImages || [];
      this.resurveyImages = e.resurveyImages || [];
      this.contractImages = e.contractImages || [];
    },
  },
  methods: {
    getImgList(e, index) {
      let arr = [];
      let i = 0;
      for (i; i < e.length; i++) {
        arr.push(e[i + index]);
        if (i + index >= e.length - 1) {
          index = 0 - (i + 1);
        }
      }
      return arr;
    },
    handleChangeImg(file, fileList, category) {
      // const url = URL.createObjectURL(file.raw);
      // switch (category) {
      //   case 'operation':
      //     this.operationImages.push(url);
      //     break;
      //   case 'acceptance':
      //     this.acceptanceImages.push(url);
      //     break;
      //   case 'resurvey':
      //     this.resurveyImages.push(url);
      //     break;
      //   case 'contract':
      //     this.contractImages.push(url);
      //     break;
      // }
    },
    uploadImage(request, category) {
      uploadImage({
        file: request.file,
        onSuccess: (only) => {
          const newImgUrl = only.url.split("?")[0];
          switch (category) {
            case "operation":
              this.operationImages.push(newImgUrl);
              break;
            case "acceptance":
              this.acceptanceImages.push(newImgUrl);
              break;
            case "resurvey":
              this.resurveyImages.push(newImgUrl);
              break;
            case "contract":
              this.contractImages.push(newImgUrl);
              break;
          }
          this.newImages.push(newImgUrl);
        },
        onError: (err) => {
          console.error("Upload failed", err);
        },
      });
    },
    removeImage(index, category) {
      let imageUrl;
      switch (category) {
        case "operation":
          imageUrl = this.operationImages[index];
          this.operationImages.splice(index, 1);
          break;
        case "acceptance":
          imageUrl = this.acceptanceImages[index];
          this.acceptanceImages.splice(index, 1);
          break;
        case "resurvey":
          imageUrl = this.resurveyImages[index];
          this.resurveyImages.splice(index, 1);
          break;
        case "contract":
          imageUrl = this.contractImages[index];
          this.contractImages.splice(index, 1);
          break;
      }
      this.imagesToRemove.push(imageUrl);
    },
    onClose() {
      this.newImages.forEach((imageUrl) => {
      const fileName = imageUrl.substring(imageUrl.lastIndexOf("/") + 1);
      removeObject(
        fileName,
        () => {
          console.log("新增的对象已成功删除");
        },
        (err) => {
          console.error("删除新增对象时出错：", err);
        }
      );
    });
    this.newImages = [];
      this.$emit("onClose");
    },
    onEnter() {
        addMaintenanceImg({
          case_number: this.form.case_number,
          operationImages: this.operationImages,
          acceptanceImages: this.acceptanceImages,
          resurveyImages: this.resurveyImages,
          contractImages: this.contractImages,
        }).then((response) => {
          this.imagesToRemove.forEach((imageUrl) => {
            const fileName = imageUrl.substring(imageUrl.lastIndexOf("/") + 1);
            removeObject(
              fileName,
              () => {
                console.log("对象已成功删除");
              },
              (err) => {
                console.error("删除对象时出错：", err);
              }
            );
          });
          this.imagesToRemove = [];
          this.$modal.msgSuccess("提交成功");
          this.$emit("onEnter");
        });
      }
    },
};
</script>

<style scoped>
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
